<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
				font-weight: 200;
				font-family: '幼圆';
				color: #323232;
			}
			
			html {
				font-size: calc(100/750*100vw);
			}
			
			a {
				-webkit-tap-highlight-color: transparent;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			
			section {width: 100%;height: 12.08rem;
				background: #f0f0f0;
			}
			
			form {
				width: 7.5rem;
				height: .9rem;
				background: #f0f0f0;
				margin-top: 1.26rem;
				position: relative;
			}
			
			form .in {
				position: absolute;
				left: .85rem;
				height: .55rem;
				width: 5.8rem;
				margin-top: .18rem;
				outline: none;
				border-radius: .3rem;
				border: none;
				text-indent: .5rem;
			}
			
			form img {
				width: .26rem;
				position: absolute;
				left: 1rem;
				top: .33rem;
			}
			.history{width: 100%;background: #FAFAFA;position: relative;box-shadow: 0 0 .1rem rgba(0,0,0,.3);}
			.history h1{font-size: .28rem;height: .64rem;line-height: .64rem;width: 7.1rem;margin-left: .2rem;
			border-bottom: .01rem solid #C1C1C1;}
			.history>div{width: 7.1rem;margin-left: .2rem;margin-top:.3rem;column-count: 3;column-gap: 0;}
			.history>div .column2{text-align: center;}
			.history>div .column3{text-align: right;}
			.history>div a{display: block;font-size: .24rem;height: .6rem;}
			.history>div a img{width:.24rem ;vertical-align: middle;}
			
			article{width: 100%;background: #FAFAFA;position: relative;box-shadow: 0 0 .1rem rgba(0,0,0,.3);
			margin-top: .2rem;}
			article h1{font-size: .28rem;height: .64rem;line-height: .64rem;width: 7.1rem;margin-left: .2rem;
			border-bottom: .01rem solid #C1C1C1;}
			article>div{width: 7.1rem;margin-left: .2rem;margin-top:.3rem;column-count: 3;column-gap: 0;}
			article>div .column2{text-align: center;}
			article>div .column3{text-align: right;}
			article>div a{display: block;font-size: .24rem;height: .6rem;}
			article>div a img{width:.24rem ;vertical-align: middle;}
		</style>
	</head>
	<body>
		<section>
			<form action="#">
				<input class='in' type="text" />
				<img src="img/third/third-ask-in1.png" />
			</form>
			<div class="history">
				<h1>搜索历史</h1>
				<div>
					<div class="column1">
					<a href="#">保持身材</a><a href="#">身材</a>
					</div>
					<div class="column2">
					<a href="#">亲子运动</a><a href="#">产后</a>
					</div>
					<div class="column3">
					<a href="#">孕期</a><a href="#">健康</a>	
					</div>
				</div>
			</div>
			<article>
				<h1>热门搜索</h1>
				<div>
					<div class="column1">
					<a href="#"><img src="img/third/third-search.png"/><span>王昕</span></a>
					<a href="#">保持身材</a><a href="#">身材</a>
					</div>
					<div class="column2">
					<a href="#"><img src="img/third/third-search2.png"/><span>崔医生</span></a>
					<a href="#">孕期</a><a href="#">产后</a>
					</div>
					<div class="column3">
					<a href="#"><img src="img/third/third-search3.png"/><span>崔医生</span></a>
					<a href="#">亲子运动</a><a href="#">健康</a>	
					</div>
				</div>
			</article>
		</section>

	</body>

</html>
